<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>exercise calculator</title>
    <link rel="stylesheet" href="./css/index.css">
    <script src="./js/index.js"></script>
</head>
<body>
    <div class="container"> 
        <table class="cal-table">
            <tr class="histroy-button">
                <td colspan="4"><div class="cal-title" >HISTORY</div></td>
            </tr> 
            <tr class="cal-display"> 
                <td class="resdisplay" colspan="4">
                    <span class='cal-result' style="color:#000;font-size: 24px;">0</span>
                    <!-- <input type="text" id="calstr"  value=""> -->
                    <!-- <input type="text" id="calResult" placeholder="0" value=""> -->
                </td>
            </tr>
            <tr>
                <td><div class="num-button">%</div></td>
                <td><div class="num-button">x<sup>2</sup></div></td>
                <td><div class="num-button">(</td>
                <td><div class="num-button">)</div></td>
            </tr>                          
            <tr>                           
                <td><div class="num-button">CE</div></td>
                <td><div class="num-button">C</div></td>
                <td><div class="num-button">←</div></td>
                <td><div class="num-button">√</div></td>
            </tr>                          
            <tr>                           
                <td><div class="num-button">7</div></td>
                <td><div class="num-button">8</div></td>
                <td><div class="num-button">9</div></td>
                <td><div class="num-button">/</div></td>
            </tr>                          
            <tr>                           
                <td><div class="num-button">4</div></td>
                <td><div class="num-button">5</div></td>
                <td><div class="num-button">6</div></td>
                <td><div class="num-button">*</div></td>
            </tr>                          
            <tr>                           
                <td><div class="num-button">1</div></td>
                <td><div class="num-button">2</div></td>
                <td><div class="num-button">3</div></td>
                <td><div class="num-button">-</div></td>
            </tr>                          
            <tr>                           
                <td><div class="num-button">0</div></td>
                <td><div class="num-button">.</div></td>
                <td><div class="num-button">=</div></td>
                <td><div class="num-button">+</div></td>
            </tr>
        </table>		
        <div class="historyPanel">HISTORY</div>
        <div class="cal-histroy">
			<span class='cal-result' style="color:#aaa;">there is no history yet</span>
        </div>
    </div>
</body>
</html>